<template>
    <div class = "newPop">
      <template v-if = "show">
        <div class="newpop1">
          <button>注册领取豪礼</button>
          <i  v-on:click = "handleClickShow" ><img src="https://www.juaicai.cn/wap/images/wap_index/new_close.png" alt=""></i>
        </div>
      </template>
      <template v-else>
          <div class="btn"></div>
          <i @click="handleClickShow" class = "up"><img src="../../assets/images/up.png" alt=""></i>
      </template>
    </div>
</template>

<script>
export default {
  name: 'NewUserPop',
  data: function () {
    return {
      show: true
    }
  },
  methods: {
    handleClickShow () {
      this.show = !this.show
    }
  }
}
</script>

<style lang = "stylus" scoped>
.newPop
  width 100%
  height 3.96rem
  position fixed
  bottom 0
  background-size 100%
  z-index 1
  .newpop1
    width 100%
    height 100%
    background url(https://www.juaicai.cn/wap/images/wap_index/newUser1.png) no-repeat center top
    background-size 100%
    button
      width 2.9rem
      height .74rem
      font-size .32rem
      color #9E4200
      border 1px solid #9E4200
      border-radius .1rem
      position absolute
      bottom .3rem
      left 50%
      margin-left -1.45rem
      text-align center
      background none
    i
      width .54rem
      height .54rem
      position absolute
      right .1rem
      top 0
      img
        width 100%
  .btn
    width 100%
    height 1.26rem
    background url(../../assets/images/btn.png) no-repeat center center
    background-size 100% 100%
    position fixed
    bottom 0
    left 0
  .up
    width 1.38rem
    height 1.18rem
    position fixed
    right 0
    bottom 0
</style>
